<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/flexible.js"></script>
</head>
<body>
<div class="header">
    <h1>数据可视化</h1>
    <div class="data">当前时间：2021年3月24-0时54分14秒</div>
    <script>
        var t = null;
        t = setTimeout(time, 1000); //開始运行
        console.log("外层运行");
        function time() {
            console.log("内层运行");
          clearTimeout(t); //清除定时器
          dt = new Date();
          var y = dt.getFullYear();
          var mt = dt.getMonth() + 1;
          var day = dt.getDate();
          var h = dt.getHours(); //获取时
          var m = dt.getMinutes(); //获取分
          var s = dt.getSeconds(); //获取秒
          document.querySelector(".data").innerHTML =
            "当前时间：" +
            y +
            "年" +
            mt +
            "月" +
            day +
            "-" +
            h +
            "时" +
            m +
            "分" +
            s +
            "秒";
          t = setTimeout(time, 1000); //设定定时器，循环运行
        }
      </script>
</div>

<div class="content">
    <div class="content-lef-right">
        <div class="panel bar">
           <h2>柱状图-就业行业</h2>
           <div class="chart"></div>
            <div class="panel-footer"></div>
        </div>
        <div class="panel line">
            <h2>柱状图-就业行业</h2>
            <div class="chart"></div>
            <div class="panel-footer"></div>
        </div>
        <div class="panel pie">
            <h2>柱状图-就业行业</h2>
            <div class="chart"></div>
            <div class="panel-footer"></div> 
        </div>
    </div>
    <div class="content-content">
    <div class="content-header">
    <div class="header-top">
    
     <div class="top-content">
         <div class="content-font">12345435</div>
        
         <div class="content-font">1325413</div>


     </div>
   
    </div>
    <div class="header-bottom">
        <span class="bottom-font">前端需求人数</span>
        <span class="bottom-font">市场供应人数</span>
    </div>
    </div>
        <div class="content-body">
            <div class="map1"></div>
            <div class="map2"></div>
            <div class="map3"></div>
            <div id="map"></div>

        </div>
    </div>
    <div class="content-lef-right">
         <div class="panel bar1">
        <h2>柱状图-就业行业</h2>
        <div class="chart"></div>
         <div class="panel-footer"></div>
     </div>
     <div class="panel line1">
         <h2>柱状图-就业行业</h2>
         <div class="chart"></div>
         <div class="panel-footer"></div>
     </div>
     <div class="panel barpractice ">
         <h2>柱状图-就业行业</h2>
         <div class="chart"></div>
         <div class="panel-footer"></div> 
     </div></div>
</div>
<script>
      var myChart = echarts.init(document.querySelector("#practice .chart"));
    option = {
      xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
          type: 'value'
      },
      series: [{
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar'
      }]
  };
  // 把配置给实例对象
  myChart.setOption(option);
</script>
<script src="js/flexible.js"></script>
<script src="js/jquery.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/index.js"></script>
<script src="js/china.js"></script>
<script src="js/myMap.js"></script>
</body>
</html>